<template>
  <div class="pie-wrap" :style="{ width: width, height: height }">
    <div class="pie" ref="pie"></div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  props: {
    width: {
      default: () => "100%",
    },
    height: {
      default: () => "100%",
    },
    value: {
      type: Array,
      default: () => [
        { value: 335, name: "空军" },
        { value: 310, name: "飞机" },
        { value: 234, name: "海军" },
        { value: 135, name: "瓦良格" },
        { value: 1548, name: "J20" },
      ],
    },
    legend: {
      type: Array,
      default: () => ["空军", "飞机", "海军", "瓦良格", "J20"],
    },
  },
  data() {
    return {
      option: null,
      chart: null,
    };
  },
  watch: {
    value() {
      this.setOptions();
    },
  },
  methods: {
    setOptions() {
      this.option = {
        color: [
          "#0080FE",
          "#8C78F7",
          "#F66664",
          "#FFEA21",
          "#B93DE0",
          "#1AB3FF",
          "#00D97C",
          "#EA518E",
          "#00E3FF",
        ],
        title: {
          text: "标签占比情况",
          left: "center",
          top: "center",
          textStyle: {
            color: "#fff",
            fontSize: 14,
            fontWeight: "400",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          textStyle: {
            color: "rgba(93, 224, 251, 1)",
          },
          itemWidth: 14,
          itemHeight: 14,
          bottom: "2%",
          left: "center",
          formatter: function (name) {
            return name.length > 10 ? name.substr(0, 10) + "..." : name;
          },
          // orient: "vertical",
          // data: this.legend,
        },
        series: [
          {
            name: "标签占比情况",
            type: "pie",
            radius: ["45%", "60%"],
            center: ["50%", "48%"],
            data: this.value,
            roseType: "radius",
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      this.chart.setOption(this.option);
    },
  },
  mounted() {
    this.chart = echarts.init(this.$refs.pie);
    this.setOptions();
    window.onresize = () => {
      this.chart.resize();
    };
  },
};
</script>

<style lang="scss" scoped>
.pie-wrap {
  width: 100%;
}
.pie {
  width: 100%;
  margin: 0 auto;
  height: 100%;
}
</style>